<ng-template #modal let-close="close" let-d="dismiss">
  <ng-container *ngIf="settings$ | async as settings">
    <div class="modal-header">
      <h4 class="modal-title">Settings</h4>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <div class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="truncate-route-name" name="truncateRouteName" [ngModel]="settings.truncateRouteName" (ngModelChange)="settingsUpdated($event, 'truncateRouteName')">
          <label class="custom-control-label" for="truncate-route-name">Truncate route path in routes list</label>
        </div>
      </div>

      <div class="title-separator"></div>

      <div class="form-group">
        <div class="input-group">
          <div class="input-group-prepend">
            <span class="input-group-text pl-0">Log body size:</span>
          </div>
          <input type="text" class="form-control col-4" id="log-body-size" [InputNumber]="{ min: 1, max: Infinity }" placeholder="10000 (default)" [ngModel]="settings.logSizeLimit" (ngModelChange)="settingsUpdated($event, 'logSizeLimit')">
          <div class="input-group-prepend">
            <span class="input-group-text pl-0">&nbsp;characters</span>
          </div>
        </div>
        <p class="text-muted"><small>Truncate the entering requests and exiting responses bodies if bigger than {{settings.logSizeLimit}} characters.</small></p>
      </div>

      <div class="title-separator"></div>

      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="analytics" name="analytics" [ngModel]="settings.analytics" (ngModelChange)="settingsUpdated($event, 'analytics')">
        <label class="custom-control-label" for="analytics">I agree to share anonymous usage data</label>
      </div>
      <p class="text-muted"><small>We are using a basic Google Analytics setup, none of your data/content is kept anywhere and it helps us improve Mockoon :)</small></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="close()">Close</button>
    </div>
  </ng-container>
</ng-template>
